<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>课堂练习题</title>
    <script src="../js/vue.js"></script>
    <style>
        /*斗篷样式*/
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<fieldset id="E01">
    <legend :disabled="true">{{text}}</legend>
    <ul>
        <li>{{text1}}</li>
        <li>{{text2}}</li>
        <li>{{text3}}</li>
    </ul>
</fieldset>
<script type="text/javascript">
    /**
     1.在legend中写入 "水泊梁山", 并且让其内容不可改变
     2.在三个 li 中 写入三个水浒英雄的名字
     */
    var v1 = new Vue({
        el: "#E01",
        data: {
            text: "水泊梁山",
            text1: "武松",
            text2: "宋江",
            text3: "林冲"
        }
    })
</script>

<fieldset id="E02">
    <legend v-cloak>{{text}}</legend>
    <ul>
        <li></li><button >{{text1}}</button>
        <li></li><button >{{text2}}</button>
        <li></li><button >{{text3}}</button>
    </ul>
</fieldset>
<script type="text/javascript">
    /**
     1.在legend中写入 "水泊梁山" 并加上"斗篷"
     2.给每个li中添加一个按钮, 每个按钮上显示一个水浒英雄的名字
     */


    window.setTimeout(()=> {
        var v2 = new Vue({
            el : "#E02",
            data : {
                text : "水泊梁山",
                text1: "武松",
                text2: "宋江",
                text3: "林冲"
            }
        });
    },2000);

</script>


<fieldset id="E03">
    <legend>练习题3: 计算属性</legend>
    <dl>
        <dt></dt>
        <dd>力量:{{text1}}</dd>
        <dd>智力:{{text2}}</dd>
        <dd>敏捷:{{text3}}</dd>
        <dd>综合战力:{{text4}}</dd>
    </dl>
</fieldset>
<script type="text/javascript">
    var heroe = {name: "花和尚鲁智深", power: 98, intel: 76, agile: 73};
    /**
     1. 将 heroe 对象的值设置到 dl 中
     3. 第 4 个 dd 使用计算属性算出其综合战力值 = 力量 + 智力 + 敏捷
     */
    var v3 = new Vue({
        el : "#E03",
        data : {
            text1 : heroe.power,
            text2 : heroe.intel,
            text3 : heroe.agile
        },
        computed : {
            text4()  {
                return this.text1+this.text2+this.text3;
            }
        }
    })
</script>


<fieldset id="E04" >
    <legend >练习题4: 样式设置</legend>
    <div :style="styleSet">
        <img  :src="img1" :style="imgHeight"><br> <span >呼延灼</span>
    </div>
    <div :style="styleSet">
        <img  :src="img2" :style="imgHeight"><br> <span >鲁智深</span>
    </div>
    <div :style="styleSet">
        <img  :src="img3" :style="imgHeight"><br> <span >张衡</span>
    </div>
</fieldset>
<script type="text/javascript">
    var v4=new Vue({
        el:"#E04",
        data:{
            img1:"img/呼延灼.jpg",
            img2:"img/鲁智深.jpg",
            img3:"img/张衡.jpg",
            imgHeight:'height:100px'
        },
        methods:{
            setImgHeight(){
                return {height:"100px"}
            },
            styleSet(){
                return {width:'120px',textAlign:'center',border:'1px red solid',display:'inline-block',padding:'5px'}
            }
        }
    })
    /**
     1. img 中添加水浒英雄的图片, 并且使用属性设定高度为100px
     2. 给 div 设置: 宽度120px + 文字居中 + 边框 + 行内块 + 内边距5px
     3. 给 span 添加英雄名字
     */
</script>


<style>
    .border {
        border: 2px solid blue;
    }

    .text {
        color: red;
        text-align: center;
    }

    .size {
        width: 150px;
        height: 150px;
        padding: 5px;
        display: inline-block;
        margin: 5px;
        padding: 5px;
    }
</style>
<fieldset id="E05">
    <legend>练习题5: class属性</legend>
    <div id="div1" :class="['size']">
        <img width="100px"
             src="https://img1.baidu.com/it/u=3297127229,1378963575&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500">
        <br> 关注样式
    </div>
    <div id="div2" :class="{border:true , size:true}">
        <img width="100px"
             src="https://img1.baidu.com/it/u=3297127229,1378963575&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500">
        <br> 关注样式
    </div>
    <div id="div3" :class="set">
        <img width="100px"
             src="https://img1.baidu.com/it/u=3297127229,1378963575&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500">
        <br> 关注样式
    </div>
</fieldset>
<script type="text/javascript">
    /**
     1. 将 .size 样式应用到 div1 上 ( 数组方式)
     2. 将 .border .size 样式应用到 div2 上 ( 对象方式)
     2. 将 .border .text .size 样式应用到 div3 上 ( 计算属性方式)
     */
    var v5=new Vue({
        el:"#E05",
        data:{
            style:['border','size','text']
        },
        computed: {
            set(){
                return this.style;
            }
        }
    })
</script>


</body>
</html>